<template>
  <div class="centerView">
    <DeviceRealTimeStatus></DeviceRealTimeStatus>
    <WaterConsumptionTrend title="近30天用水量趋势"></WaterConsumptionTrend>
    <WaterQualityDistribution title="饮水机进水水质分布（TDS）"></WaterQualityDistribution>
  </div>
</template>

<script lang="ts" setup>
import DeviceRealTimeStatus from './DeviceRealTimeStatus.vue'
import WaterConsumptionTrend from './WaterConsumptionTrend.vue'
import WaterQualityDistribution from './WaterQualityDistribution.vue'
</script>

<style lang="scss" scoped>
.centerView {
  display: flex;
  flex-direction: column;
  margin: 0 20px;
}
</style>
